<template>
	<view class="content">
		<!-- 搜索框组件 -->
		<searchInput :config="searchconfig"></searchInput>
		<!-- 轮播图组件 -->
		<Swipers swiperUrl="/prod-api/api/rotation/list?type=2" detailsUrl="../newsDetails/newsDetails?id="></Swipers>
		<!-- 全部服务模块 -->
		<view class="allService" v-if="allService">
			<!-- 循环输出服务图片 -->
			<view class="service" v-for="(x,index) in Service" :key="index" @click="goService" :data-nav="x.link">
				<image :src="getImg(x.imgUrl)"></image>
				<p style="margin-top: .5em;">{{x.serviceName}}</p>
			</view>
			<!-- 最后一个省略 -->
			<view class="service last" @click="goAllService">
				<image src="../../static/allService.png"></image>
				全部服务
			</view>
		</view>
		<!-- 新闻列表 -->
		<view class="article">
			<!-- 切换tab列表 -->
			<view class="article-tabs">
				<p :class="{
					'article-active' : newsShowTab[key].isShow
				}" v-for="(item,key) in newsShowTab" :key="key" @click.stop="changeTab(key)">{{key}}</p>
			</view>
			<view class="article-list" v-for="(item,key) in newsRows" :key="key">
				<!-- 文章列表组件 -->
				<ArticleList v-for="(article,index) in item" :key="index" :article="article"
					v-show="newsShowTab[key].isShow" goDetailsUrl="../newsDetails/newsDetails?id=">
				</ArticleList>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		getImg
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				// 搜索框配置
				searchconfig: {
					searchUrl: "/pages/search_news/search_news",
					isTabBar: false,
					searchValue: ""
				},
				allService: [],
				Service: [],
				newsType: [],
				newsRows: {},
				newsShowTab: {},
				getImg: getImg
			}
		},
		created() {
			const that = this
			// 获取全部服务模块的对应资源
			http({
				url: "/prod-api/api/service/list"
			}).then((res) => {
				that.allService = res.data.rows
				// 过滤出前9个服务模块
				that.Service = that.allService.slice(0, 9)
			})

			// 获取新闻类型
			http({
				url: "/prod-api/press/category/list"
			}).then((res) => {
				that.newsType = res.data.data
				// 循环获取对应类型的文章
				that.newsType.forEach((x, index) => {
					http({
						url: "/prod-api/press/press/list",
						data: {
							type: x.id
						}
					}).then((resolve) => {
						// 给对应的对象设置内容
						that.$set(that.newsRows, x.name, resolve.data.rows)
						that.$set(that.newsShowTab, x.name, {
							isShow: false
						})
					}).then(() => {
						// 只取第一个
						for (let x in that.newsShowTab) {
							that.$set(that.newsShowTab, x, {
								isShow: true
							})
							return
						}
					})
				})
			})
		},
		methods: {
			// 跳转到对应的服务页
			goService(e) {
				uni.navigateTo({
					url: `/pages/${e.currentTarget.dataset.nav}`
				})
				// console.log(`/pages/${e.currentTarget.dataset.nav}`)
			},
			// 跳转到全部服务页
			goAllService() {
				uni.switchTab({
					url: "/pages/allService/allService"
				})
			},
			// 切换tab内容
			changeTab(key) {
				for (let x in this.newsShowTab) {
					x === key ? this.newsShowTab[x].isShow = true : this.newsShowTab[x].isShow = false
				}
			}
		}
	}
</script>

<style scoped>
	/* 全部服务模块 */
	.allService {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100vw;
		margin-top: .5rem;
	}

	.allService>.service {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		flex: 20%;
		font-size: .8rem;
		margin-top: .5rem;
	}

	.allService>.service>image {
		width: 50%;
		height: 40px;
	}

	/* 新闻列表 */
	.article {
		display: flex;
		flex-direction: column;
		margin-top: 1rem;
	}

	.article-tabs {
		display: flex;
		justify-content: space-between;
		padding: 0 1rem 1rem 1rem;
		gap: 1rem;
		font-size: .5rem;
	}

	.article-tabs>p {
		text-align: center;
		min-width: 4em;
		padding: .5rem;
		background-color: #ecf0f1;
		color: #2c3e50;
		border-radius: 5px;
	}

	.article-tabs>.article-active {
		background-color: #bdc3c7;
		color: white;
		border-bottom: 3px solid #16a085;
	}

	.article-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.article-list>* {
		padding: 1rem;
		border-bottom: 1px solid #ccc;
	}

	.article-title {
		text-align: center;
		height: 3em;
		line-height: 3em;
		font-size: 1.5em
	}
</style>
